<script setup lang="tsx">
import { nextTick, onUnmounted, reactive, ref } from 'vue';
import { UUID } from 'uuidjs';
import dayjs from 'dayjs';
import { exportFinishedGoodsDeliverys, findAllDeliveryOrderNos } from '@/service/api/modules/product-warehouse/index';
import Inquiry from './modules/inquiry.vue';

const leftPage = ref({
  pageNum: 1,
  pageSize: 200
});
function getTime() {
  const today = new Date().setHours(0, 0, 0, 0);
  const lastDay = today - 1000 * 60 * 60 * 24;
  return [dayjs(lastDay).format('YYYY-MM-DD'), dayjs(today).format('YYYY-MM-DD')];
}
const searchParams = ref<any>({
  sendNo: null,
  time: getTime()
});

const pagination = reactive({
  current: leftPage.value.pageNum,
  pageSize: leftPage.value.pageSize,
  showSizeChanger: true,
  pageSizeOptions: ['50', '100', '200', '300', '500'],
  showQuickJumper: true,
  showTotal: (total, range) => {
    console.log('object :>> ', range);
    return `共${total}条`;
  },
  total: 0,
  onChange: async (current: number, size: number) => {
    pagination.current = current;
    pagination.pageSize = size;
    leftPage.value.pageNum = current;
    leftPage.value.pageSize = size;
    getLeftTableData();
  }
});

const leftAlignId = ref(null);

const leftTableData = ref([]);

const columnChecks = ref([
  {
    key: 'index',
    dataIndex: 'index',
    title: '序号',
    width: 70,
    align: 'center',
    checked: true
  },
  {
    key: 'description',
    dataIndex: 'description',
    title: '二维码信息',

    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'createTime',
    dataIndex: 'createTime',
    title: '创建时间',

    align: 'center',
    checked: true,
    ellipsis: true
  }
]);

const leftTableLoading = ref(false);

function getLeftTableData() {
  const { sendNo = '', startTime, endTime } = searchParams.value;
  const params: any = { sendNo, startTime, endTime, ...leftPage.value };
  if (searchParams.value.time?.[0]) {
    params.startTime = searchParams.value.time[0];
    params.endTime = searchParams.value.time[1];
  }
  leftTableLoading.value = true;
  findAllDeliveryOrderNos(params)
    .then(({ data, error }) => {
      if (!error) {
        data.list.forEach((item, index) => {
          item.index = index + 1;
        });
        pagination.total = data.total;
        leftTableData.value = data.list;
      }
    })
    .finally(() => (leftTableLoading.value = false));
}

getLeftTableData();
function reset() {
  leftPage.value.pageNum = 1;
  pagination.current = 1;
  getLeftTableData();
}

function search() {
  leftPage.value.pageNum = 1;
  pagination.current = 1;
  getLeftTableData();
}

const rightTableLoading = ref(false);
const rightTableData = ref([]);

const selectedRowKeys = ref([]);

function tableSelectChange(val) {
  selectedRowKeys.value = val;
}
const sendNo = ref('');
const customRow = record => {
  return {
    style: {
      // 设置字体颜色
      // 'color': record.id === this.leftAlignId ? '#fff' : '',
      //  设置行背景色
      background: record.id === leftAlignId.value ? '#BAEAFA' : ''
      // 设置字体类型
      // 'font-family': 'Microsoft YaHei',
      // // 下划线
      // 'text-decoration': 'underline',
      // // 字体样式-斜体
      // 'font-style': 'italic',
      // // 字体加粗
      // 'font-weight': 'bold'
    }
  };
};

const searchHeight = ref(42);

window.addEventListener('resize', () => {
  nextTick(() => {
    const ele = document.querySelector('.printed-code .search-box');
    const height = ele?.clientHeight;
    searchHeight.value = height || 76;
  });
});

function downLoad() {
  // 下载列表配置
  const ids = selectedRowKeys.value.join(',');
  exportFinishedGoodsDeliverys(ids);
}

onUnmounted(() => {
  window.removeEventListener('resize', () => {});
});
</script>

<template>
  <div
    class="jl-main-page printed-code h-full h-full min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto"
  >
    <Inquiry v-model:model="searchParams" class="search-box" @reset="reset" @search="search" />
    <ARow wrap class="w-full" :style="{ height: `calc(100% - ${searchHeight}px)` }">
      <ACol :span="24" class="h-full">
        <ACard
          :bordered="false"
          :body-style="{ flex: 1, overflow: 'hidden' }"
          class="table-card h-full flex-col-stretch sm:flex-1-hidden card-wrapper"
        >
          <template #title>
            <AButton type="primary" class="mini-btn" ghost @click="downLoad()">
              <template #icon>
                <span class="align-sub text-icon" />
              </template>
              <span class="ml-3px">导出</span>
            </AButton>
          </template>
          <STable
            ref="tableWrapperRef"
            :columns="columnChecks"
            :data-source="leftTableData"
            bordered
            :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: tableSelectChange }"
            size="small"
            :loading="leftTableLoading"
            row-key="id"
            :pagination="pagination"
            :custom-row="customRow"
            :scroll="{ x: 300, y: 1200 }"
            class="h-full"
            :row-height="23"
          />
        </ACard>
      </ACol>
    </ARow>
  </div>
</template>

<style lang="scss" scoped>
.Order-style {
  height: 28px;
  line-height: 28px;
  font-size: 20px;
  font-weight: bold;
  color: rgba(19, 66, 113);
}
</style>
